<template>
    <el-row class="padd20">
        <el-row class="box box-pack-between">
            <el-col class="title box box-pack-start">
                <el-select v-model="selectVal" placeholder="选择学期" @change="handleSelect" class="text">
                    <el-option label="老师" value="6"></el-option>
                    <el-option label="学生" value="9"></el-option>
                </el-select>
                <el-select v-model="selectVal" placeholder="选择年级" @change="handleSelect" class="text ml10">
                    <el-option label="老师" value="6"></el-option>
                    <el-option label="学生" value="9"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-row class="mt20 padd20 maxwidth" :gutter="20">
                <el-col :span="12" class="list" v-for="(item,i) in courseList" :key="i">
                    <div class="grid-content bg-white box box-align-center box-pack-between">
                        <div class="left box box-pack-start box-align-center">
                            <el-image :src="item.imgUrl" class="img"></el-image>
                            <div class="box box-tb box-pack-start box-align-start ml20">
                                <h3>{{item.courseName}}</h3>
                                <span>共{{item.cnt}}章</span>
                                <span>责任编辑 {{item.zbName}}</span>
                            </div>
                        </div>
                        <div class="box box-tb box-pack-between box-align-end right">
                            <span class="title">布置任务</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-row>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                tkzt: false,
                selectVal: '',
                searchText: '',
                title: '添加',
                schoolid: this.$store.getters.getLoginInfo.user.schoolId,
                tabList: [{
                        title: "课程任务"
                    },
                    {
                        title: "实践任务"
                    }
                ],
                current: 0,
                num: 1,
                courseList: [{
                    id: "1",
                    imgUrl: "https://sc2.nosdn.127.net/2/pic/201806/Landing-BG.jpg",
                    courseName: "社会劳动课程",
                    cnt: 12,
                    zbName: "张成 张凯 张继科",
                    cbs: "人民教育出版社"
                }],
                sjList: [{
                        id: "1",
                        imgUrl: "https://sc2.nosdn.127.net/2/pic/201806/Landing-BG.jpg",
                        courseName: "社会劳动课程",
                        cnt: 12,
                        zbName: "张成 张凯 张继科",
                        cbs: "人民教育出版社"
                    },
                    {
                        id: "1",
                        imgUrl: "https://sc2.nosdn.127.net/2/pic/201806/Landing-BG.jpg",
                        courseName: "社会劳动课程",
                        cnt: 12,
                        zbName: "张成 张凯 张继科",
                        cbs: "人民教育出版社"
                    },
                    {
                        id: "1",
                        imgUrl: "https://sc2.nosdn.127.net/2/pic/201806/Landing-BG.jpg",
                        courseName: "社会劳动课程",
                        cnt: 12,
                        zbName: "张成 张凯 张继科",
                        cbs: "人民教育出版社"
                    }
                ],
                kcShow: false,
                sjShow: false
            };
        },
        mounted() {
            // this.getData();
        },
        methods: {
            changeTab(i) {
                this.current = i
            },
            handleDelete(id) {
                this.$confirm('是否删除该课程', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {

                });
            },
            getData() {
                var params = {
                    schoolid: this.schoolid,
                    searchtext: this.searchText,
                    roleid: this.selectVal
                };
                this.$api.Admin.getAccData(params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleSelect() {
                this.getData();
            },
            clickAdd() {
                let results = [{
                    result: 1,
                    score: 20,
                    id: 2
                }];
                let params = {
                    recordid: 1,
                    str: results
                };
                console.log(JSON.stringify(params));
                console.log(this.$api.login.test());
                this.$api.login.test(params).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.page = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            clickKcClose() {
                this.kcShow = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .maxwidth {
        max-width: 1400px;
        margin: 20px auto !important;
    }

    .list {
        &:first-child {
            .grid-content {
                border: 1px dotted #6473F9;
            }
        }
    }

    .tab {
        width: 158px;
        height: 42px;
        line-height: 42px;
        border-radius: 14px;
        border: 1px solid #E5E6F1;
        background-color: #fff;
        font-size: 18px;

        &:first-child {
            border-radius: 14px 0px 0px 14px;
        }

        &:last-child {
            border-radius: 0px 14px 14px 0px;
            border-left: none;
        }

        &.active {
            background: #626BF1;
            color: #fff;
        }
    }

    .grid-content {
        padding: 0 10px;
        margin-top: 20px;
        height: 134px;
        background: #FFFFFF;
        border: 1px solid #fff;
        border-radius: 12px;
        transition: .3s ease-in-out;

        .el-plus {
            display: inline-block;
            width: 32px;
            height: 32px;
            line-height: 26px;
            background: linear-gradient(-13deg, #626BF1, #989BFA);
            border-radius: 16px;
            color: #fff;
            font-size: 26px;
            font-style: normal;
        }

        .img {
            width: 148px;
            height: 96px;
            border-radius: 12px;
        }

        .right {
            height: 96px;

            .title {
                width: 134px;
                height: 20px;
                background: #F3F4FB;
                border-radius: 9px;
                color: #939FF4;
                font-size: 14px;
            }

            .delete {
                width: 46px;
                height: 24px;
                background: #FFFFFF;
                border: 1px solid #FF5A77;
                border-radius: 12px;
                color: #FF5A77;
            }
        }

        &:hover {
            border: 1px solid #BEBDE6;
            box-shadow: 2px 6px 13px 0px rgba(225, 227, 245, 0.69);
        }
    }

    .bg-white {
        background-color: #fff;
    }

    .item {
        margin-top: 50px;
        width: 334px;
        height: 20px;
        background: #F9E0DE;
        border-radius: 10px;

        span {
            color: #E36572;

            i {
                margin-right: 10px;
                display: inline-block;
                width: 48px;
                height: 20px;
                line-height: 20px;
                background: #EE8892;
                border-radius: 3px;
                text-align: center;
                color: #fff;
                font-style: normal;
            }

        }
    }
</style>
